<template>
  <view class="content">
    <view class="nav">
      <NavBar :position="position" @search="search" @show="showCo" />
    </view>
    <view class="map">
      <TxMap @changeMap="changeMap" :position="position" :dListHeight="dListHeight" :dataList="dataList"
        :showCon="showCon" />
    </view>
    <view class="d-list">
      <DList :dataList="dataList" @change="listChange" @watchHeight="watchHeight" />
      <!-- <LoadMore :state="state" /> -->
    </view>
    <Guidance :show="guidanceShow" @close="guidanceShow = false" />
  </view>
</template>

<script setup>
import NavBar from '@/components/navBar/NavBar.vue';
import DList from './components/DList.vue';
import TxMap from '@/components/txMap/TxMap.vue';
import { getLocation, getAddress, getFuzzyLocation } from '@/utils/tools'
import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue';
import { getHomeList } from '@/api/apiList'
import Guidance from '@/components/guidance/Guidance.vue';

const shareConf = {
  title: '云鹰换电',
  path: '/pages/index/index',
}

onShareAppMessage(() => {
  return shareConf
})

onShareTimeline(() => {
  return shareConf
})

let showCon = ref(true)
const showCo = (showBool) => {
  showCon.value = showBool
  console.log(showCon.value, 'showCon.value')
}

// 判断指引
const isGuidance = () => {
  const bind = uni.getStorageSync('bind')
  const hasShown = uni.getStorageSync('guidanceShow')
  if (bind == 0 && !hasShown) {
    guidanceShow.value = true
    uni.setStorageSync('guidanceShow', 1)
  } else {
    guidanceShow.value = false
  }
}

onShow(() => {
  isGuidance()
})

let guidanceShow = ref(false)
let position = ref({
  position: {
    latitude: '30.5728',
    longitude: '104.0668'
  },
  addressName: '成都市'
})

const changeMap = (data) => {
  // position.value.position.latitude = data.latitude
  // position.value.position.longitude = data.longitude
  console.log(data, 'ddd-----===')
  queryParams.value.pageNum = 1
  dataList.value = []
  position.value.addressName = data.city
  queryParams.value.city = data.city
  queryParams.value.longitude = data.longitude
  queryParams.value.latitude = data.latitude
  getHomeListData()
}

const queryParams = ref({
  pageNum: 1,
  pageSize: 20,
  longitude: '',
  latitude: '',
  city: '',
  sortType: '0',
})

let state = ref('finished')
const dataList = ref([])
const getHomeListData = async () => {
  state.value = 'loading' // finished error
  for (const key in queryParams.value) {
    if (!queryParams.value[key]) {
      delete queryParams.value[key]
    }
  }
  if (!queryParams.value.label?.length) {
    delete queryParams.value.label;
  }
  const { code, msg, rows, total } = await getHomeList(queryParams.value)
  if (code == 200) {
    if (total == 0) {
      state.value = 'finished'
    } else {
      if (rows.length == 0) {
        state.value = 'finished'
      } else {
        state.value = 'finished'
        dataList.value = [...dataList.value, ...rows]
      }
    }
  } else {
    state.value = 'error'
  }
}



const listChange = (params, type) => {
  console.log(params, 'parm')
  if (params.sortType == 0) params.sortType == '0'
  queryParams.value = { ...queryParams.value, ...params }
  console.log(queryParams.value, 'queryParams.value')
  if (type == 'change') {
    queryParams.value.pageNum = 1
    dataList.value = []
  }
  getHomeListData()
}

const search = (params) => {
  if (params?.city) {
    position.value = {
      position: {
        latitude: params?.city?.latitude,
        longitude: params?.city?.longitude
      },
      addressName: params?.city?.city
    }
  }
  if (!params.city) {
    queryParams.value = { ...queryParams.value, stationName: params?.stationName }
  } else {
    queryParams.value = { ...queryParams.value, city: params?.city?.city ? params?.city?.city : '', latitude: params?.city?.latitude ? params?.city?.latitude : '', longitude: params?.city?.longitude ? params?.city?.longitude : '' }
  }
  queryParams.value.pageNum = 1
  dataList.value = []
  getHomeListData()
}

// 获取列表高度
let dListHeight = ref(0)
const watchHeight = (height) => {
  dListHeight.value = height
}


onLoad(async () => {
  await getLocationInfo()
  getHomeListData()
})


let addressName = ref('')
const getLocationInfo = async () => {
  // getLocation
  const { latitude, longitude } = await getLocation()
  if (!latitude || !longitude) {
    queryParams.value = {
      ...queryParams.value,
      longitude: position.value.position.longitude,
      latitude: position.value.position.latitude,
      city: position.value.addressName
    }
    uni.removeStorageSync('position')
    return
  }
  const addressRes = await getAddress(latitude, longitude)
  if (addressRes.statusCode == 200) {
    addressName.value = addressRes.data.result.address_component.province
    position.value = {
      position: {
        latitude,
        longitude
      },
      addressName: addressRes.data.result.address_component.province
    }
    // 
    queryParams.value = {
      ...queryParams.value,
      longitude,
      latitude,
      city: addressRes.data.result.address_component.province
    }
    uni.setStorageSync('position', JSON.stringify(position.value))
    uni.setStorageSync('currentPosition', { latitude, longitude, city: addressRes.data.result.address_component.province })

  } else {
    queryParams.value = {
      ...queryParams.value,
      longitude: position.value.position.longitude,
      latitude: position.value.position.latitude,
      city: position.value.addressName
    }
    uni.removeStorageSync('position')
    uni.removeStorageSync('currentPosition')
  }
}



</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.map {
  width: 100%;
  height: 100vh;
  z-index: 1;
}

.nav {
  z-index: 9999;
}

page {
  background-color: #eee;
}
</style>
